!function ($) {
  $.ajax({
    url: "http://localhost:3000/goods",
    type: "GET",
    dataType: "json",
    success: function (response) {
      var template1 = '';
      console.log(response)
      $.each(response, function (index, value) {
        console.log(value)
        template1 += ` <li class="food-right-item" id="${value.id}">
          <a href="../html/details.html"  target="_blank" >
            <div class="size-box">
              <img src="${value.img}" alt="">
            </div>
            <p class="i-size-tit is-tags-mark">
              <u class="jsd-tag"></u>
              ${value.name}</p>
            <span>
              <em>¥</em>
              ${value.price}
            </span>
            <div class="jiesheng">
              <div class="jiesheng-box">
                <p>已省</p>
                <p>
                  <em>¥</em>
                  22.0
                </p>
              </div>
            </div>
            </a>
        </li>`;
      });
      $(".shengxian-box").find("ul").html(template1);
      let num = $(".shengxian-box").find("ul").children("li").length

      $(".shengxian-box").find("ul").children("li").on("click", function (e) {
        sessionStorage.setItem("goodId", $(this).attr("id"))
      })
    }
  });


  // $.ajax({
  //   url: "http://localhost:3000/json/shangping.json", //json文件位置
  //   success: function (data) { //请求成功完成后要执行的方法 
  //     console.log(data)
  //     //each循环 使用$.each方法遍历返回的数据date
  //     $.each(data.first, function (i, item) {
  //       var str = '<div>姓名:' + item.name + '昵称：' + item.nick + '</div>';
  //       document.write(str);
  //     })
  //   }
  // })





  $(function () {
    class shouye {
      constructor() {
        //顶部二级导航部分
        this.top_li = $(".global-top-list");//顶部的li标签(二级导航有关的)
        this.flag = true;//开关
        //轮播图部分
        this.banner = document.querySelector(".banner");
        this.pci = document.querySelectorAll(".banner ul li");
        this.quan = document.querySelectorAll(".banner ol li");
        this.left = document.querySelector("#left");
        this.right = document.querySelector("#right");
        this.num = 0;
        this.timer = null;

        //为您推荐 Only For You
        this.shopping_ul = $(".shopping-ul");
        this.shopping_list = $(".shopping-ul li");
        this.left = $(".btn-prev");
        this.right = $(".btn-next");



        //零食饮料
        this.foodul = $(".food-move");
        this.foodlist = $(".food-move li");
        this.drinkleft = $(".drink-prev");
        this.drinkright = $(".drink-next");

        //清洁各护
        this.food_clearul = $(".food-move-clear");
        this.food_clearlist = $(".food-move-clear li");
        this.qinleft = $(".qin-prev");
        this.qinright = $(".qin-next");


        //数码家电
        this.appliances_ul = $(".food-move-appliances");
        this.appliances_list = $(".food-move-appliances li");
        this.shumaleft = $(".shuma-prev");
        this.shumaright = $(".shuma-next");




        //山姆家厨房
        this.btnleft = $(".btn-left");
        this.btnright = $(".btn-right");
        this.menusul = $(".menus-ul");
        this.menuslist = $(".menus-ul li");

        //楼梯效果
        this.louceng = $(".main .louti");//获取每个楼梯
        this.loutinav = $("#loutinav");//获取左侧楼梯
        this.loutinav_li = $("#loutinav li")//获取左侧楼梯的每一个li标签

        //登录 和 退出
        this.login = $(".login");//登录
        this.register = $(".register");//注册
        this.tuichu = $(".tuichu");//退出

        //搜索框
        this.keyword = $("#keyword");

      }
      init () {
        let _this = this;

        // console.log(this.keyword);


        //搜索框事件
        this.keyword.on('keyup', function () {
          $.ajax({
            url: 'http://list.samsclub.cn/search/getSmartKeywordForCloud/?keyword=' + $(this).val() + '&siteId=3&callback=call',
            // data:'data',
            dataType: "jsonp",
            jsonpCallback: 'call',//定义回调函数的函数名 给success 
            success: function (res) {//success就是回调函数 call

              $(res).each((index, elm) => {
                console.log(elm.keywords);
              })

            }
          });
        })



        //登录输入后  改变成用户名的状态
        if (localStorage.getItem('customname')) { //如果有isLogin 那么说明登录成功 因为isLogin是和用户名同时存的 当做判断条件存的 没其他意义
          this.login.html(localStorage.getItem('customname'));
          this.register.hide();

        } else {
          this.tuichu.hide();
        }

        this.tuichu.on("click", function () {
          localStorage.removeItem('customname');  //删除本地存储
          location.reload();//刷新页面
        })

        //楼梯效果
        $(window).on("scroll", function () {
          let $topvalue = $(this).scrollTop();
          if ($topvalue > 400) {
            _this.loutinav.show();
          } else {
            _this.loutinav.hide();
          }
          _this.louceng.each((i, elm) => {
            console.log($(elm).offset().top);
            let lou = $("#loutinav li").not(".last");
            let sig = $(elm).offset().top + 200;
            if (sig > $topvalue) {//每次 当每个盒子距离顶部的高度比 滚动条滚动的距离大 就会触发这个事件 一旦滚动条当前元素的高度 事件就会移到下一个元素 以此类推
              $(lou[i]).addClass("active").siblings().removeClass("active");
              return false;// each方法 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。
            }
          })
        })

        this.loutinav_li.not('.last').on('click', function () {
          //当前的楼梯添加类active;
          $(this).addClass('active').siblings().removeClass('active');
          //获取每一个和当前楼梯对应的楼层的top值。
          let $top = _this.louceng.eq($(this).index()).offset().top//$(this).index():当前点击楼梯的li的索引
          $('html,body').animate({
            scrollTop: $top
          });
        });

        //3.回到顶部
        $('.last').on('click', function () {
          $('html,body').animate({
            scrollTop: 0
          });
        });



        this.top_li.hover(function () {//顶部二级导航效果
          if (_this.flag) {
            $(this).find(".me-shanmo-list").stop(true).animate({
              top: 45
            }, 300)

            _this.flag = false;
          }
        }, function () {
          $(this).find(".me-shanmo-list").stop(true).animate({
            top: 38
          }, 300)
          _this.flag = true;
        })


        //轮播图部分

        for (let i = 0; i < this.quan.length; i++) {
          this.quan[i].onclick = function () {//this指向当前的小圆圈
            _this.num = i;//可以直接把i赋值给that.num
            _this.tab(_this.num);//因为tab()函数的this是指向实例对象的 所以要用that  如果用this 只是指向当前点击的小圆圈

          }

        }


        this.timer = setInterval(function () {//自动开启轮播图定时器
          _this.buffright();
        }, 2000)

        this.banner.onmouseover = function () {//鼠标经过时 关闭轮播图定时器
          clearInterval(_this.timer);
        }

        this.banner.onmouseout = function () {//鼠标离开时 开启轮播图定时器
          _this.timer = setInterval(function () {
            _this.buffright();
          }, 2000)
        }


        //滚轮事件
        $(window).on("scroll", function () {
          // console.log($(window).scrollTop());
          if ($(window).scrollTop() > 100) {
            $(".shanmu-nav").addClass("navFixed");
            $(".global-cart").css("position", " fixed").addClass("cartFixed");


          } else {
            $(".shanmu-nav").removeClass("navFixed");
            $(".global-cart").css("position", " relative").removeClass("cartFixed");
          }
        })


        //图片旋转  利用旋转插件实现的效果
        var rotation2 = function () {
          $('.clue img').rotate({
            angle: 0,
            animateTo: 360,
            callback: rotation2,
            easing: function (x, t, b, c, d) {
              return c * (t / d) + b;
            }
          });
        }
        rotation2();



        //为您推荐的效果

        this.shopping_ul.css({
          width: this.shopping_list.eq(0).outerWidth() * this.shopping_list.length,
          height: 240
        })
        this.xiaoguo = 0;
        this.op = 0;
        this.liwidth = this.shopping_list.eq(0).outerWidth();

        this.right.on("click", function () {
          _this.xiaoguo++;//每次点击的时候 下标加1
          if (_this.xiaoguo <= 2) {
            switch (_this.xiaoguo) {
              case 1: _this.op = 4; break;//点击第一次的时候 下标为1 _this.op设为4 ul的left值移动4张图片的距离
              case 2: _this.op = 6; break;/*点击第二次的时候 下标为2 _this.op设为6 ul的left值移动6张图片的距离
                            (这里的移动6张不是在之前移动4张的基础上移动的 每次移动的距离都是从0开始计算的)   所以相当于 对比之前4张的位置 只移动了2张图片的距离 
                            但是对比left为0的初始处 是移动了6张图片的距离*/
            }

            _this.shopping_ul.stop(true, true).animate({
              left: -_this.liwidth * _this.op
            }, 500)
          } else if (_this.xiaoguo > 2) {
            _this.xiaoguo = 2
          }


        })


        this.left.on("click", function () {
          _this.xiaoguo--;
          if (_this.xiaoguo >= 0) {
            switch (_this.xiaoguo) {
              case 1: _this.op = 4; break;//下标为1时  ul的距离移动到 4张图片宽度的位置(负值)
              case 0: _this.op = 0; break;
            }
            _this.shopping_ul.stop(true, true).animate({
              left: -_this.liwidth * _this.op
            }, 500)
          } else if (_this.xiaoguo < 0) {
            _this.xiaoguo = 0
          }

        })

        //零食饮料
        this.foodli = this.foodlist.eq(0).outerWidth();
        this.food = 4;
        this.foodul.animate({
          width: this.foodli * this.foodlist.length
        })

        this.drinkright.on("click", function () {

          if (_this.foodlist.length > _this.food) {
            _this.food++;
            _this.foodul.stop(true).animate({
              left: -_this.foodli * (_this.food - 4)
            }, 500)
          }

        })

        this.drinkleft.on("click", function () {
          if (_this.food > 4) {
            _this.food--;
            _this.foodul.stop(true).animate({
              left: -_this.foodli * (_this.food - 4)
            }, 500)
          }

        })

        //清洁各护
        this.food_clear_li = this.food_clearlist.eq(0).outerWidth();
        this.food_clear = 4;
        this.food_clearul.animate({
          width: this.food_clear_li * this.food_clearlist.length
        })

        this.qinright.on("click", function () {

          if (_this.food_clearlist.length > _this.food_clear) {
            _this.food_clear++;
            _this.food_clearul.stop(true).animate({
              left: -_this.food_clear_li * (_this.food_clear - 4)
            }, 500)
          }

        })

        this.qinleft.on("click", function () {
          if (_this.food_clear > 4) {
            _this.food_clear--;
            _this.food_clearul.stop(true).animate({
              left: -_this.food_clear_li * (_this.food_clear - 4)
            }, 500)
          }

        })

        //数码家电
        this.appliances_liwidth = this.appliances_list.eq(0).outerWidth();
        this.appliances_num = 4;
        this.appliances_ul.animate({
          width: this.appliances_liwidth * this.appliances_list.length
        })

        this.shumaright.on("click", function () {
          if (_this.appliances_list.length > _this.appliances_num) {
            _this.appliances_num++;
            _this.appliances_ul.stop(true).animate({
              left: -_this.appliances_liwidth * (_this.appliances_num - 4)
            }, 500)
          }

        })

        this.shumaleft.on("click", function () {
          if (_this.appliances_num > 4) {
            _this.appliances_num--;
            _this.appliances_ul.stop(true).animate({
              left: -_this.appliances_liwidth * (_this.appliances_num - 4)
            }, 500)
          }

        })


        //山姆家厨房
        //  this.btnleft=$(".btn-left");
        //  this.btnright=$(".btn-right");
        //  this.menusul = $(".menus-ul");
        //  this.menuslist = $(".menus-ul li");

        this.menusnum = 3;
        this.menusliwidth = this.menuslist.eq(0).outerWidth();

        this.menusul.animate({
          width: this.menusliwidth * this.menuslist.length
        })

        this.btnright.on("click", function () {
          if (_this.menuslist.length > _this.menusnum) {
            _this.menusnum++;
            _this.menusul.animate({
              left: -_this.menusliwidth * (_this.menusnum - 3)
            }, 500)
          }

        })

        this.btnleft.on("click", function () {
          if (_this.menusnum > 3) {
            _this.menusnum--;
            _this.menusul.animate({
              left: -_this.menusliwidth * (_this.menusnum - 3)
            }, 500)
          }

        })









      }

      //右箭头 配合自动切换轮播图
      buffright () {
        this.num++;
        if (this.num > this.pci.length - 1) {
          this.num = 0;
        }

        this.tab(this.num);
      }


      //左箭头
      // buffleft() {
      //     this.num--;
      //     if (this.num < 0) {
      //         this.num = this.pci.length - 1;
      //     }

      //     this.tab(this.num);
      // }

      tab (num) {//切换

        for (let j = 0; j < this.quan.length; j++) {//方法里的this是指向实例对象的  就和构造函数的原型方法一样
          this.quan[j].className = '';
          this.pci[j].className = '';
        }

        this.pci[num].className = 'show';
        this.quan[num].className = 'active';


      }



    }





    new shouye().init();





  })
}(jQuery)




